import React from 'react'
import './task.css'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
import {Icon, NavBar, Toast} from "antd-mobile";
import {goBack} from "../../utils/goback";
import LocalStorageService from "../../utils/LocalStorageService";
import RedBag from "../../res/images/web/task/coin gift@2x.png"
import RedBagOpen from "../../res/images/web/task/hongbao_selected@2x.png"
import QuotaIcon from "../../res/images/web/task/zhuangshi@2x.png"
import CustomButton from "../../shared-components/CustomButton/CustomBotton";
import SignIcon from "../../res/images/web/task/renwu／sign@2x.png"
import VideoIcon from "../../res/images/web/task/renwu／vidio@2x.png"
import ShareIcon from "../../res/images/web/task/renwu／share@2x.png"
import CommentIcon from "../../res/images/web/task/renwu／pinglun@2x.png"
import VerifyIcon from "../../res/images/web/task/renwu／shiming@2x.png"
import VipIcon from "../../res/images/web/task/renwu／vip@2x.png"
import {shareReq} from "../../apis/goApis";
import {copyToClip} from "../../utils/copy";
import {applyDateDiff} from "../../utils/dateService";

class TaskContainer extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.login = LocalStorageService.get('isLogin')
    }

    componentDidMount() {
        this.get()
        this.getUser()
    }

    get = () => {
        const uid = this.uid
        this.props.doGetTaskInfo({uid,})
    }

    getUser = () => {
        if (this.login) {
            this.props.fetchUserDetail({uid: this.uid,})
        }
    }

    share = async () => {
        const uid = this.uid

        const href = 'http://www.youtoball.com'
        const copy = copyToClip(href)
        if (copy) {
            Toast.info('复制成功')
            shareReq({uid,})
            this.get()
        } else {
            Toast.info('复制不成功 请手动复制')
        }
    }

    render() {

        const history = this.props.history
        const task = this.props.task
        const userDetail = this.props.user.userdetail
        let isVip
        const Vipst = userDetail.Vipst
        const Vip = userDetail.Vip
        if (Vipst === 0) {
            isVip = false
        } else {
            const buyVipTime = new Date(Vipst * 1000)
            const endVipTime = applyDateDiff(buyVipTime, {month: Vip})
            const now = new Date()
            // console.log(endVipTime - now)
            isVip = endVipTime - now > 0
        }

        const taskList = task.taskList
        const inviteList = taskList.slice(8)
        const moreList = taskList.slice(0, 8)


        const leftContent = <Icon
            type="left"
            size='lg'
            style={{color: `#fff`}}
            onClick={() => goBack(history)}
        />

        const head = <div className='task-ctn-head'>

            <NavBar
                leftContent={leftContent}
                style={{
                    background: 'transparent',
                    color: '#36C8B9',
                    fontWeight: 600,
                }}
            >
                每日任务
            </NavBar>
            <p className='task-ctn-head-desc'>
                每日完成如下任务，可获得更多奖励
            </p>

        </div>

        const redBagList = inviteList.map((data, index) => {
            const resultTextMapper = ['1位', '累计5位', '累计10位', '累计15位', '累计20位',]

            const finished = data.finished
            let finishedNum = 0
            if (finished) {
                finishedNum = finished.Num
            }
            const itemFinished = finishedNum >= data.Daynum

            const redBag = <div className='red-bag-item'>
                <img src={RedBag} alt='' style={{width: 46, height: 33}}/>
                {/*<img src={itemFinished ? RedBagOpen : RedBag} alt='' style={{width: 30, height: 36}}/>*/}
                <span>+{data.Addcoin}</span>
            </div>

            const dot = <div
                className={itemFinished ? 'invite-symbol invite-symbol-full' : 'invite-symbol'}
            />

            const result = <div
                // className='invite-result'
                // className={itemFinished ? 'invite-result invite-result-full' : 'invite-result'}
            >
                {itemFinished ? '完成' : resultTextMapper[index]}
                {/*{itemFinished ? <span>完成</span> : <span>{finishedNum}/{data.Daynum}</span>}*/}
            </div>

            return <div key={index} className='invite-item'>
                {result}
                <div style={{position: 'relative',}}>
                    {dot}
                </div>
                {redBag}
            </div>
        })

        let finishedNum = 0
        if (inviteList.length > 0 && inviteList[4].finished) {
            finishedNum = inviteList[4].finished.Num
        }
        const width = finishedNum / 20 * 100

        const indicator = <div className='flex' style={{
            height: '4px',
            position: 'absolute',
            top: '26px',
            left: '10%',
            width: '80%',
        }}>
            <div
                style={{
                    background: '#E64F44',
                    width: `${width}%`,
                    height: '4px',
                }}
            />
            <div
                style={{
                    background: 'rgba(248,248,248,1)',
                    width: `${100 - width}%`,
                    height: '4px',
                }}
            />
        </div>

        const friendsList = <div className='friends-list-ctn'>
            <div className='flex-center-align-center' style={{marginBottom: '24px',}}>
                <img src={QuotaIcon} style={{width: 13, height: 10,}} alt='' />
                <div style={{textAlign: 'center', margin: '0 8px'}}>
                    <p className='bold' style={{fontSize: 20, lineHeight: '21px',}}>邀请好友</p>
                    <p className='bold' style={{fontSize: 16, lineHeight: '21px',}}>得金币</p>
                </div>

                <img src={QuotaIcon} style={{width: 13, height: 10,}} alt='' />
            </div>
            {/*<p style={{textAlign: 'center', marginBottom: '16px'}} className='gray-text'>邀请用户下载App并注册成功，可获得对应金币</p>*/}
            <div className='flex-center-align-center red-bag-list'>
                {indicator}
                {redBagList}
            </div>
            <CustomButton
                bg='#FFA500'
                onClick={() => history.push('./userinfo/yqm')}
            >
                去邀请
            </CustomButton>

        </div>

        const taskTitle = <p className='task-title'>更多任务</p>

        const moreTaskList = <div className='task-list-ctn'>
            {moreList.map((task, index) => {
                const id = task.Id
                const day = task.Daynum
                const coin = task.Addcoin
                const finished = task.finished
                let completed = false
                let finishedNum = 0
                if (finished) {
                    finishedNum = finished.Num
                    if (finishedNum >= day) {
                        completed = true
                    }
                }

                if (id === 2 || id === 6 || id === 7 || id === 8 || id === 4) return null

                const history = this.props.history

                const m = {
                    1: {
                        title: '观看视频',
                        icon: VideoIcon,
                        btnTxt: '去观看',
                        callback: () => {
                            history.push('./video')
                        }
                    },
                    3: {
                        title: '每日签到',
                        icon: SignIcon,
                        btnTxt: '去签到',
                        callback: () => {
                            history.push('./my')
                        }
                    },
                    4: {
                        title: '每日分享',
                        icon: ShareIcon,
                        btnTxt: '去分享',
                        callback: () => {
                            this.share()
                        }
                    },
                    5: {
                        title: '讨论区发表话题或留言',
                        icon: CommentIcon,
                        btnTxt: '去评论',
                        callback: () => {
                            history.push('./topic')
                        },
                    },
                    6: {
                        title: '实名认证',
                        icon: VerifyIcon,
                        btnTxt: '去认证',
                        callback: () => {
                            history.push('./userinfo/realinfo')
                        }
                    },
                    7: {
                        title: '预测消费',
                        icon: CommentIcon,
                        btnTxt: '去消费',
                        callback: () => {
                            history.push('./ai')
                        }
                    },
                    8: {
                        title: isVip ? '本月已充值去续费' : '会员充值',
                        icon: VipIcon,
                        // btnTxt: isVip ? '本月已充值' : '去充值',
                        btnTxt: '去充值',
                        callback: () => {
                            history.push('./vip-goods')
                        }
                    },
                }
                const val = m[id]
                const {title, icon, btnTxt, callback,} = val

                const btn = <div
                    className={'task-item-btn'}
                    onClick={callback}
                >
                    <span>{btnTxt}</span>
                </div>
                const finishedBtn = <div className={'task-item-btn task-item-btn-finished'}>
                    <span>完成</span>
                </div>

                return <div
                    key={index}
                    className='task-item-ctn flex-space-between-align-center'

                >
                    <div className='flex-center-align-center'>
                        <img alt='' src={icon} style={{width: 24, height: 24, marginRight: '6px',}}/>
                        <div>
                            <div className='flex-align-center task-item-title'>
                                <p>{title}</p>
                                <span>({finishedNum}/{day === -1 ? 1 : day})</span>
                            </div>
                            <p className='task-item-coin'>金币 + {coin}</p>
                        </div>
                    </div>
                    {completed ? finishedBtn : btn}
                </div>

            })}
        </div>

        const otherTitle = <p className='task-title'>其他任务</p>

        const otherTaskList = <div className='task-list-ctn' style={{marginBottom: '16px',}}>
            {moreList.map((task, index) => {
                const id = task.Id
                const day = task.Daynum
                const coin = task.Addcoin
                const finished = task.finished
                let completed = false
                let finishedNum = 0
                if (finished) {
                    finishedNum = finished.Num
                    if (finishedNum >= day) {
                        completed = true
                    }
                }

                if (id === 2 || id === 1 || id === 3 || id === 4 || id === 5) return null

                const history = this.props.history

                const m = {
                    4: {
                        title: '每日分享',
                        icon: ShareIcon,
                        btnTxt: '去分享',
                        callback: () => {
                            this.share()
                        }
                    },
                    5: {
                        title: '讨论区发表话题或留言',
                        icon: CommentIcon,
                        btnTxt: '去评论',
                        callback: () => {
                            history.push('./topic')
                        },
                    },
                    6: {
                        title: '实名认证',
                        icon: VerifyIcon,
                        btnTxt: '去认证',
                        callback: () => {
                            history.push('./userinfo/realinfo')
                        }
                    },
                    7: {
                        title: '预测消费',
                        icon: CommentIcon,
                        btnTxt: '去消费',
                        callback: () => {
                            history.push('./ai')
                        }
                    },
                    8: {
                        title: isVip ? '本月已充值去续费' : '会员充值',
                        icon: VipIcon,
                        // btnTxt: isVip ? '本月已充值' : '去充值',
                        btnTxt: '去充值',
                        callback: () => {
                            history.push('./vip-goods')
                        }
                    },
                }
                const val = m[id]
                const {title, icon, btnTxt, callback,} = val

                const btn = <div
                    className={'task-item-btn'}
                    onClick={callback}
                >
                    <span>{btnTxt}</span>
                </div>
                const finishedBtn = <div className={'task-item-btn task-item-btn-finished'}>
                    <span>已完成</span>
                </div>

                return <div
                    key={index}
                    className='task-item-ctn flex-space-between-align-center'

                >
                    <div className='flex-center-align-center'>
                        <img alt='' src={icon} style={{width: 24, height: 24, marginRight: '6px',}}/>
                        <div>
                            <div className='flex-align-center task-item-title'>
                                <p>{title}</p>
                                <span>({finishedNum}/{day === -1 ? 1 : day})</span>
                            </div>
                            <p className='task-item-coin'>金币 + {coin}</p>
                        </div>
                    </div>
                    {completed ? finishedBtn : btn}
                </div>

            })}
        </div>

        return <div>
            {head}
            {friendsList}
            {taskTitle}
            {moreTaskList}
            {otherTitle}
            {otherTaskList}
        </div>
    }

}

const mapState = state => ({
    user: state.user,
    task: state.task,
})

const mapDispatch = dispatch => ({
    doGetTaskInfo: (payload) => dispatch.task.doGetTaskInfo(payload),
    fetchUserDetail: (id) => dispatch.user.fetchUserDetail(id),
})

export default connect(mapState, mapDispatch)(withRouter(TaskContainer))
